<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="24">
        <div class="title">物业管家</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :xs="10" :sm="8" :md="6" :lg="5" :xl="4">
        <div>
          <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px">
              <el-form-item prop="username">
                <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  placeholder="密码"
                  v-model="ruleForm.password"
                  @keyup.enter.native="submitForm('ruleForm')"
                ></el-input>
              </el-form-item>
              <div class="login-btn">
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { setItem,getItem } from "@/tools/common.js";

export default {
  data() {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ required: true, validator: checkPhone, trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度6-12之间"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let p = {};
          let url = "/mng/login";
          p.phoneNum = this.ruleForm.username;
          p.password = this.ruleForm.password;
          this.$http
            .fetch(url, p)
            .then(res => {
              console.log(res);
              if (res.code == 0) {
                this.$message({
                  showClose: true,
                  message: "登录成功",
                  type: "success"
                });
                sessionStorage.setItem("token", res.data.token);
                setItem("info", res.data);
                setItem("navIndex", 0);
                console.log(getItem('info'));
                this.$router.push({ path: "/sys", query: { navIndex: 0 } });
              }
            })
            .catch(err => {});
        }
      });
    },
    //       getSysInfo(){
    //           let p = {};
    //           let url = '/info/get';
    //           this.$http.fetch(url,p)
    //           .then(res=>{
    //               //localStorage.setItem('sysInfo',JSON.stringify(res.data));
    //               setItem('sysInfo',res.data)
    //           })
    // },
    init() {
      //清除本地缓存
      sessionStorage.removeItem("memberId");
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("mng.username");
      // this.getSysInfo();
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
.title {
  text-align: center;
  font-size: 35px;
  margin-top: 250px;
  margin-bottom: 20px;
  white-space: nowrap;
  min-width: 425px;
}

.login-btn button {
  width: 100%;
}
</style>
